import React, { useState } from "react";
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Layout, Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[]
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

// 菜单选项
const items: MenuItem[] = [
    {
        label: "栏目1",
        key: "/page1",
        icon: <PieChartOutlined />,
    },
    {
        label: "栏目2",
        key: "/page2",
        icon: <DesktopOutlined />,
    },
    {
        label: "栏目3",
        key: "page3",
        icon: <TeamOutlined />,
        children: [
            {
                label: "栏目301",
                key: "/page3/page301",
            },
            {
                label: "栏目302",
                key: "/page3/page302",
            },
            {
                label: "栏目303",
                key: "/page3/page303",
            },
        ],
    },

    {
        label: "栏目4",
        key: "page4",
        icon: <FileOutlined />,
        children: [
            {
                label: "栏目401",
                key: "/page4/page401",
            },
            {
                label: "栏目402",
                key: "/page4/page402",
            },
            {
                label: "栏目403",
                key: "/page4/page403",
            },
        ],
    },
];
// const items: MenuItem[] = [
//     getItem("Option 11", "/page1", <PieChartOutlined />),
//     getItem("Option 2", "/page2", <DesktopOutlined />),
//     getItem("User", "page3", <UserOutlined />, [
//         getItem("Tom", "3"),
//         getItem("Bill", "4"),
//         getItem("Alex", "5"),
//     ]),
//     getItem("Team", "page4", <TeamOutlined />, [
//         getItem("Team 1", "6"),
//         getItem("Team 2", "8"),
//     ]),
//     getItem("Files", "9", <FileOutlined />),
// ];

const rootSubmenuKeys = ["page3", "page4"];

const Comp: React.FC = () => {
    // 设置展开项初始值
    // 拿到currentRoute.pathname跟items数组的每一项的children进行对比

    const currentRoute = useLocation(); //取当前选择菜单的路径 做高亮

    let firstOpenKeys: string = "";
    // 双重for循环找key
    items.forEach((ele: any) => {
        if (ele.children && ele.children.length !== 0) {
            ele.children.forEach((cItem: any) => {
                if (cItem.key === currentRoute.pathname) {
                    firstOpenKeys = ele.key;
                }
            });
        }
    });
    // function findKey(obj: any) {
    //     return (obj.key = currentRoute.pathname);
    // }
    // for (let i = 0; i < items.length; i++) {
    //     if (items[i] && items[i]?["children"].find(findKey)) {
    //       firstOpenKeys = items[i].key
    //         break;
    //     }
    // }

    const [openKeys, setOpenKeys] = useState([firstOpenKeys]);
    const navigateTo = useNavigate();
    const menuClick = (e: any) => {
        // 点击跳转到对应路由 编程式导航跳转 利用hook
        navigateTo(e.key);
    };
    const handleOpenChange = (keys: string[] | any) => {
        // 展开或回收某项菜单时，执行这里的代码
        console.log("keys: ", keys); //keys是一个数组，记录当前哪一项是展开的
        // 把数组改为最后一项，因为只要一项是展开的
        const latestOpenKey = keys.find(
            (key: any) => openKeys.indexOf(key) === -1
        );
        if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
            // 如果
            console.log("latestOpenKey!: ", latestOpenKey!);
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };

    return (
        <>
            {/* 菜单栏 */}
            <Menu
                theme="dark"
                //当前选中项
                defaultSelectedKeys={[currentRoute.pathname]}
                mode="inline"
                items={items}
                onClick={menuClick}
                // 展开或回收某项菜单事件
                onOpenChange={handleOpenChange}
                // 当前菜单展开项的key数组
                openKeys={openKeys}
            />
        </>
    );
};

export default Comp;
